<template>
    <div class="content_box">
        <div class="main-box">
            <p class="main-title">退费账单管理</p>

            <div class="statistics">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="box">
                            <div class="title_box">
                                <p class="title">退费金额（元）</p>
                                <p class="text">
                                    <img src="@/assets/aq_icon.png" alt="" />
                                </p>
                            </div>
                            <p class="price">
                                <span>￥</span>
                                1
                            </p>
                            <div class="num">
                                <p>退费案件数<span>1</span></p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="box">
                            <div class="title_box">
                                <p class="title">待核销中金额（元）</p>
                             
                            </div>
                            <p class="price">
                                <span>￥</span>
                                1
                            </p>
                            <div class="num">
                                <p>等待银行付款<span>1</span></p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="box">
                            <div class="title_box">
                                <p class="title">已核销金额（元）</p>
                                <!-- <p class="text">
                  <img src="@/assets/aq_icon.png" alt="" />
                </p> -->
                            </div>
                            <p class="price">
                                <span>￥</span>
                                1
                            </p>
                            <div class="num">
                                <p>支付数量<span>1</span></p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- 搜索 -->
            <search-component :closeDown="true" :search-options="searchOptions" :params="params"
                @search="onSearch" @reset="onReset"></search-component>

            <!-- 切换 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :name="'first' + index" v-for="(item, index) in tabList" :key="index">
                    <template #label>
                        <span>{{ item.name }}
                            <span v-if="tabListIndex == index" style="color: red; font-size: 12px">({{ total
                            }}笔)</span></span>
                    </template>
                </el-tab-pane>

            </el-tabs>

            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="案件信息" align="center">
                    <el-table-column prop="date" label="案件编号" width="180" />
                    <el-table-column prop="name" label="嫌疑人" width="150" />
                    <el-table-column prop="address" label="缴费时间" width="150" />
                    <el-table-column prop="address" label="交易类型" width="150" />
                    <el-table-column prop="address" label="缴费金额" width="150" />
                    <el-table-column prop="address" label="办案人员/单位" width="250" />
                </el-table-column>

                <el-table-column label="结算信息" align="center">
                    <el-table-column prop="address" label="交易状态" width="150"/>
                    <el-table-column prop="address" label="支付方式" width="150"/>
                    <el-table-column prop="address" label="退款金额" width="150"/>
                    <el-table-column prop="address" label="结算时间" width="150"/>
                    <el-table-column prop="address" label="操作" min-width="250" align="right" fixed="right">
                        <template #default="scope">
                            <el-button size="mini" type="primary" @click="toSee(scope.row.id)">查看</el-button>
                            <el-button size="mini" type="primary" @click="toSee(scope.row.id)">凭证打印</el-button>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination :page-size="params.pagesize" :size="params.page" layout="total, prev, pager, next"
                    :total="total" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, watch, ref, onMounted } from "vue";
// 搜索参数
let searchOptions = ref(
  [
  { label: "案件编号：", type: "input", prop: "case_code", placeholder: "请输入" },
  {
    label: "交易时间：",
    type: "date-range",
    prop: "name7",
    placeholder: "请选择",
    // options:agentOptions.value,
  },
  {
    label: "交易金额：",
    type: "input-range",
    prop: "min_amount",
    prop1: "max_amount",
    placeholder: "请输入",
  },
  
  {
    label: "嫌疑人姓名：",
    type: "input",
    prop: "crime_name",
    placeholder: "请输入",
  },
  {
    label: "支付方式：",
    type: "select",
    prop: "status",
    placeholder: "请选择",
    options:[],
  },
  {
    label: "交易状态：",
    type: "select",
    prop: "department_id",
    placeholder: "请选择",
    options:[],
  },
  
]
)

// 切换
let activeName = ref('first0')
let tabListIndex = ref(0)
let tabList = ref(
    [
        { name: '全部', status: '' },
        { name: '待核销', status: '0' },
        { name: '已核销', status: '1' },
        { name: '现金退款', status: '1' },
        { name: '线上退款', status: '1' }
    ]
)

// 表格
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

// 分页
let total = ref(0)
let params = ref({
    page: 1,
    pagesize: 10
});
</script>
<style scoped lang="scss"></style>
    